<template>
  <div class="dashboard">
    <dv-border-box-8 class="border-box">
      <el-card class="card" shadow="always">
        <div slot="header" class="clearfix">
          <span>聊天室大数据统计</span>
          <dv-digital-flop :config="timeConfig" class="time"/>
        </div>
        <dv-decoration-2 class="decoration" />
        <div class="content">
          <div class="chart-container" ref="onlineUsersChart"></div>
          <div class="chart-container" ref="userStatsChart"></div>
        </div>
      </el-card>
    </dv-border-box-8>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'element-plus/theme-chalk/index.css';
import { BorderBox8, DigitalFlop, Decoration2 } from '@jiaminghi/data-view';
import { ElCard } from 'element-plus';
import { format } from 'date-fns';

// 数据模拟
const onlineUsersData = [120, 200, 150, 80, 70, 110, 130];
const userStatsData = {
  activeUsers: 3000,
  newUsers: 150,
  totalUsers: 5000,
};

// 在线人数统计图表配置
const onlineUsersChart = ref<HTMLDivElement | null>(null);
const userStatsChart = ref<HTMLDivElement | null>(null);
const currentTime = ref<string>(format(new Date(), 'yyyy-MM-dd HH:mm:ss'));

const updateCurrentTime = () => {
  currentTime.value = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
};

setInterval(updateCurrentTime, 1000);

const timeConfig = ref({
  number: [currentTime.value],
  content: '{nt}',
  textAlign: 'center',
  style: {
    fontSize: 24,
    color: '#fff',
  },
});

const initOnlineUsersChart = () => {
  if (onlineUsersChart.value) {
    const chart = echarts.init(onlineUsersChart.value);
    chart.setOption({
      title: {
        text: '在线人数统计',
      },
      tooltip: {},
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {},
      series: [
        {
          name: '在线人数',
          type: 'bar',
          data: onlineUsersData,
          itemStyle: {
            color: '#409EFF',
          },
        },
      ],
    });
  }
};

const initUserStatsChart = () => {
  if (userStatsChart.value) {
    const chart = echarts.init(userStatsChart.value);
    chart.setOption({
      title: {
        text: '用户量统计',
        subtext: '实时数据',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '用户量统计',
          type: 'pie',
          radius: '50%',
          data: [
            { value: userStatsData.activeUsers, name: '活跃用户' },
            { value: userStatsData.newUsers, name: '新用户' },
            { value: userStatsData.totalUsers, name: '总用户' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          itemStyle: {
            color: function (params: any) {
              const colorList = ['#409EFF', '#67C23A', '#E6A23C'];
              return colorList[params.dataIndex];
            },
          },
        },
      ],
    });
  }
};

onMounted(() => {
  initOnlineUsersChart();
  initUserStatsChart();

  setInterval(() => {
    timeConfig.value.number = [currentTime.value];
  }, 1000);
});
</script>

<style scoped lang="less">
.dashboard {
  padding: 20px;
  background: #f0f2f5;
  height: 85vh;
  .border-box {
    padding: 20px;
    height: 100%;
  }

  .card {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    .el-card__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #409eff;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }

    .time {
      width: 200px;
      height: 50px;
    }

    .decoration {
      width: 100%;
      height: 4px;
      background-color: #67c23a;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 20px;

      .chart-container {
        width: 45%;
        height: 400px;
        margin-bottom: 20px;
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        background: #fff;
      }
    }
  }
}
</style>
